<template>
  <div>
    <!-- 品牌推荐 -->
    <div class="admin-top">
      <div class="admin-top-sousou">
        <span>
          <el-icon>
            <Search />
          </el-icon>
          筛选搜索
        </span>
        <div>
          <el-button @click="resettingInput">重置</el-button>
          <el-button type="primary" @click="searchBrand">查询搜索</el-button>
        </div>
      </div>
      <div class="admin-bom">
        <div>
          <span> 品牌名称: </span>
          <el-input
            type="text"
            v-model="username"
            placeholder="请输入用户名"
          ></el-input>
        </div>
        <div>
          <span> 推荐状态: </span>
          <!-- <el-input
            type="text"
            v-model="statusValue"
            placeholder="请输入用户名"
          ></el-input> -->
          <el-select v-model="statusValue" clearable placeholder="全部">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="admim-nav">
      <div>
        <el-icon>
          <Tickets />
        </el-icon>
        <span> 数据列表 </span>
      </div>
      <div>
        <el-button type="primary" @click="addadvertise">选择品牌</el-button>
      </div>
    </div>
    <div class="admin-foter">
      <el-table align="center" :data="tableData" style="width: 100%" border>
        <el-table-column align="center" type="selection" width="59" />
        <el-table-column align="center" prop="id" label="编号" width="119" />
        <el-table-column
          align="center"
          prop="brandName"
          label="品牌名称"
          width="729"
        />
        <el-table-column align="center" label="是否推荐" width="199">
          <template #default="scope">
            <el-switch
              @change="changeStatus(scope.row)"
              :value="scope.row.recommendStatus == 1 ? true : false"
            />
          </template> </el-table-column
        >>
        <el-table-column align="center" prop="sort" label="排序" width="159">
        </el-table-column>
        <el-table-column align="center" label="状态" width="159">
          <template #default="scope">
            <div>
              {{ scope.row.recommendStatus == 1 ? "推荐中" : "未推荐" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="address" label="操作" width="180">
          <template #default="scope">
            <el-button type="primary" link @click="setSorting(scope.row)"
              >设置排序</el-button
            >
            <el-button type="primary" link @click="deleteBrandFn(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <div>
          <el-dropdown>
            <span class="el-dropdown-link">
              请选择
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button class="romvoand" type="primary"> 确定 </el-button>
        </div>
        <el-pagination
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[1, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 设置排序 -->
    <SetSorting
      :visible="visible"
      @cancel="onCloseDialog"
      :form="value"
      @confirm="onConfirmDialog"
    ></SetSorting>
    <ChooseBrand
      :showChooseBrand="showChooseBrand"
      @chooseBrand="cancelChooseBrand"
    ></ChooseBrand>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, unref } from "vue";
import * as api from "../../request/api";
import useTable from "../../hooks/useTables";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { ArrowDown } from "@element-plus/icons-vue";
// 导入设置排序组件
import SetSorting from "./components/SetSorting.vue";
// 导入选择品牌组件
import ChooseBrand from "./components/ChooseBrand.vue";
let route = useRouter();

// 输入框内容
const username = ref("");
// 推荐状态
const statusValue = ref("") as any;
// 设置排序弹出框状态
const visible = ref(false);
// 选择品牌弹出框状态
const showChooseBrand = ref(false);
// 推荐状态
const options = [
  {
    value: "0",
    label: "未推荐",
  },
  {
    value: "1",
    label: "推荐中",
  },
];

// 发起请求获取数据
let { tableData, getTableData, pagination } = useTable(api.flash.getBrand, {
  pageSize: 5,
  brandName: username,
  recommendStatus: statusValue,
} as any);
// console.log(tableData);

let value = ref<{ id: number; sort: number }>({
  id: 0,
  sort: 0,
});

// 查询
let searchBrand = () => {
  //   console.log();
  statusValue.value == "未推荐" ? 0 : 1;
  getTableData();
};
// 重置
let resettingInput = () => {
  username.value = "";
  statusValue.value = "";
  getTableData();
};

// 修改推荐状态
let changeStatus = (row: any) => {
  //   console.log(row);
  let data = {
    ids: row.id,
    recommendStatus: row.recommendStatus == 0 ? 1 : 0,
  };
  ElMessageBox.confirm("是否要修改推荐状态? ", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      // console.log(row);
      await api.flash.postUpdateRecommendStatus(data);
      ElMessage({
        type: "success",
        message: "修改成功!",
      });
      getTableData();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消修改",
      });
    });
};

// 设置排序
let setSorting = (row: any) => {
  visible.value = true;
  value.value = row;
};
// 删除
let deleteBrandFn = async (id: number) => {
  console.log(id);
  ElMessageBox.confirm("是否要删除该推荐!", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      // 发请求删除
      await api.flash.deleteBrand(id);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getTableData();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
// 子级emit组件传过来的事件
let onCloseDialog = () => {
  visible.value = false;
};

// 确认了输入框的内容之后
// 需要发送请求
let onConfirmDialog = (row: any) => {
  // console.log(row);  // row就是表单数据
  // 二次 确认
  ElMessageBox.confirm("是否要修改排序? ", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      // console.log(row);
      let rows = JSON.parse(JSON.stringify(row));
      await api.flash.updateSort(rows);
      ElMessage({
        type: "success",
        message: "修改成功",
      });
      getTableData();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消修改",
      });
    });
};

//分页
getTableData();
const handleSizeChange = (val: number) => {
  getTableData();
};
const handleCurrentChange = (val: number) => {
  getTableData();
};

//添加
const addadvertise = () => {
  showChooseBrand.value = true;
};
// 关闭弹窗
let cancelChooseBrand = () => {
  showChooseBrand.value = false;
};
</script>

<style lang="scss" scoped>
.admin-top {
  width: 96%;
  height: 90px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
  padding: 20px;
  margin-top: 60px;
  margin-bottom: 20px;

  .admin-top-sousou {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      .el-icon {
        padding-right: 10px;
      }
    }

    .el-button {
      margin-left: 20px;
    }
  }
}

.admin-bom {
  padding-left: 50px;
  display: flex;
  justify-content: flex-start;

  div {
    padding-left: 30px;
  }

  .el-input {
    padding-left: 30px;
    width: 200px;
  }
}

.admim-nav {
  width: 96%;
  height: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;

  .example-pagination-block {
    margin-top: 10px;
    float: right;
  }
}

.admin-foter {
  margin-top: 20px;
}

.IMG {
  width: 100%;
}

.el-dropdown-link {
  width: 150px;
  border: 2px solid #ccc;
  height: 32px;
  padding-left: 10px;
  border-radius: 5px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  .el-icon--right {
    padding-right: 10px;
  }

  .el-dropdown-menu {
    width: 150px;
    height: 32px;
  }
}

.romvoand {
  height: 32px;
  margin-left: 20px;
}

.footer {
  display: flex;
  justify-content: space-between;
}
</style>
